<template>
  <div>
    <div class="like">
      <div class="like-top">
        <img
          src="https://imgs.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png"
        />
        <span>猜你喜欢</span>
      </div>
      <ul>
        <li class="like-item border-bottom" v-for="item in likeList" :key="item.id"
        @click="toDetails">
          <div class="like-img">
            <img
              :src="item.imgUrl"
            />
          </div>
          <div class="like-text">
            <div class="like-title">{{item.title}}</div>
            <div class="like-message">{{item.message}}</div>
            <div class="like-map">
              <span class="like-mark">￥<b>{{item.pre}}</b>起</span>
              <span class="like-item-map">{{item.map}}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "like",
  props:['likeList'],
  data() {
    return {
     
    };
  },
  methods:{
    toDetails(){
       this.$router.push("/detail")
    }
   
  }
};
</script>

<style scoped>
.like {
  margin-top: 0.2rem;
  font-size: 0.28rem;
  background: #fff;
  padding: 0 0.2rem;
}
.like-top {
  padding: 0.2rem 0;
  font-size: 0.32rem;
}
.like-top img {
  width: 0.3rem;
  height: 0.3rem;
}
.like-item {
  position: relative;
  overflow: hidden;
  padding: 0.2rem 0;
}
.like-img {
  float: left;
}
.like-img img {
  width: 2rem;
  height: 2rem;
}
.like-text {
  padding-left: 0.2rem;
  overflow: hidden;
}
.like-title{
  font-size:.36rem;
  color:#212121;
  margin-top:.4rem;
}
.like-message{
  margin-top:.3rem;
  color:#616161;
  font-size:.24rem;
}
.like-map{
   margin-top:.3rem;
   color:#616161;
   position:relative;

}
.like-mark{
  color:#ff8300;
}
.like-mark b{
  font-size:.40rem;
}
.like-item-map{
  position:absolute;
  right:0;
  top:.1rem;
  font-size:.28rem;
}
</style>